<template>
	<div class="select-box">
		<div>
			<span>id:</span>
			<el-select v-model="option.id" placeholder="请选择id">
				<el-option v-for="item in [1,2,3,4,5,6,7,8,9,10]" :key="item" :label="item" :value="item"></el-option>
			</el-select>
		</div>
		<div>
			<span>标题:</span>
			<el-input v-model="option.title" placeholder="请输入标题"></el-input>
		</div>
		<div>
			<el-button type="primary" @click="getTabList">查询</el-button>
		</div>
	</div>
  <el-table :data="data.table[option.page]" style="width: 100%" border>
    <el-table-column prop="id" label="id"></el-table-column>
    <el-table-column prop="title" label="标题"></el-table-column>
    <el-table-column prop="body" label="内容" min-width="180"></el-table-column>
  </el-table>
  <el-pagination :current-page="option.page" layout="total, prev, pager, next, jumper" :total="data.total"
    @current-change="handleCurrentChange">
  </el-pagination>
</template>

<script>
import { reactive } from "vue";
import { getCourseList } from "@/http/api.js";
export default {
  name: "CourseList",
  setup() {
    // let tableData = reactive([]);
    let data = reactive({
      table: [],
      page: 0,
      psages: 0,
      total: 0
    })
	// 设置检索的双向响应数据
	let option = reactive({
		id:'',
		title:'',
		page:0
	})
    // onMounted(() => {
    //   getCourseListFun({page:data.page})
    // });
    // let getCourseListFun = () => {
    //   return getCourseList({}).then((res) => {
    //     tableData = res;
    //   });
    // };

    let getCourseListFun = async (obj) => {
      let arr = await getCourseList(obj)
      let newArr = []
      data.total = arr.length
      // 将一维数组拆分成多维
      // splice(index,10) 截取数组  split截取字符串
      for (let index = 0; index < arr.length; index++) {
        newArr.push(arr.splice(index, 10))
        index += 10
      }
      data.table = newArr
      // console.log(newArr)
    }
	getCourseListFun() 
    // 实现分页
    let handleCurrentChange = (index) => {
      option.page = index
      // getCourseListFun({ page: data.page }) 重复调用  外面调用一次就够
    }
	// 实现数据查询
	let getTabList = () => {
		console.log(option)
	}
    return {
      // tableData,
      data,
      handleCurrentChange,
	  getTabList,
	  option
    };
  },
};
</script>

<style lang="scss" scoped>
	.select-box{
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: 10px;
		>div{
			margin-right: 10px;
			width: 30%;
			display: flex;
			align-items: center;
			span{
				width: 50px;
			}
		}
	}
</style>
